<template>
  <Drawer :title="title" v-model="visiable" :width="width" :mask-closable="closable" :closable="closable" @on-close="onClose" :before-close="beforeClose">
    <slot></slot>
    <div class=" drawer-footer" :style="{'width':(width-6)+'px'}" v-if="!closable">
      <Button @click="close">{{$t('button.cancel')}}</Button>
      <Button type="primary" @click="onSave">{{$t('button.save')}}</Button>
    </div>
  </Drawer>
</template>
<script>
  export default {
    name: 'comp_xcdrawer',
    props: {
      title: String,
      width: Number,
      closeconfirm: {
        type: Boolean,
        default: true
      },
      closable: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        visiable: false,
      }
    },
    mounted() {
    },
    methods: {
      beforeClose() {
        if (this.closeconfirm) {
          return new Promise((recev) => {
            this.$Modal.confirm({
              title: this.$t('cancelmodel.title'),
              content: this.$t('cancelmodel.content'),
              onOk: () => recev()
            })
          })
        }
      },
      show() {
        this.visiable = true
      },
      close(force) {
        if (force !== true && this.closeconfirm) {
          this.$Modal.confirm({
            title: this.$t('cancelmodel.title'),
            content: this.$t('cancelmodel.content'),
            onOk: () => {
              this.visiable = false
            }
          })
        } else {
          this.visiable = false
        }
      },
      onSave() {
        this.$emit('onDrawerSave')
      },
      onClose() {
        this.$emit('onDrawerClose')
      }
    }
  }
</script>
